<template>
  <div class="creatlist">
    <div class="user">
      <img src="" alt="" />
      <span></span>
    </div>
    <van-nav-bar
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
    <van-grid direction="horizontal" :column-num="3">
      <van-grid-item icon="" text="创建歌单" @click="creatlist(id)" />
      <van-grid-item icon="" text="收藏歌单" @click="liststar(id)" />
      <van-grid-item icon="" text="歌单助手" @click="listhelper(id)" />
    </van-grid>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="onLoad"
    >
      <div
        class="mylist"
        v-for="item in playlist"
        :key="item._id"
        @click="detail(item.id)"
      >
        <div class="mylistleft">
          <img :src="item.coverImgUrl" alt="" />
          <div class="lmylist">
            <p>{{ item.name }}</p>
            <span>{{ item.tag }}</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { goodlistAPI } from '@/api/mine.js'
// import { Toast } from 'vant'
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: true,
      show: false,
      value: '',
      playlist: [],
      id: '',
    }
  },
  computed: {},
  watch: {},

  methods: {
    onLoad() {},
    //跳转创建歌单
    creatlist(id) {
      this.$router.push('/creatlist/' + id)
    },
    //跳转歌单收藏
    liststar(id) {
      this.$router.push('/liststar/' + id)
    },
    //跳转歌单助手
    listhelper(id) {
      this.$router.push('/listhelper/' + id)
    },
    //获取精品歌单
    async gooduserlist() {
      const result = await goodlistAPI()
      console.log(result)
      if (result.status === 200) {
        this.playlist = result.data.playlists
      }
    },
    onClickLeft() {
        this.$router.go(-1);
        },
    //跳转歌单详情
    detail(id) {
      this.$router.push(`/listdetail/${id}`)
    },
  },
  created() {
    const id = this.$route.params.id
    this.id = id
    console.log(id)
    this.gooduserlist()
  },
  mounted() {},
  components: {},
}
</script>
<style scoped>
.creatlist {
  padding: 15px;
}
.mylist {
  padding: 10px;
  background-color: white;
  overflow: hidden;
}
.mylistleft {
  float: left;
}
.mylistleft img {
  float: left;
  width: 50px;
  height: 50px;
}
.mylistleft .lmylist {
  float: left;
}
.mylistleft .lmylist p {
  width: 260px;
  line-height: 30px;
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap;
}
.mylistleft .lmylist span {
  font-size: 12px;
}
</style>
